import React, { useState, useEffect } from 'react';
import {
    Form,
    Input,
    Select,
    DatePicker,
    InputNumber,
    Checkbox,
    Row,
    Image,
    Radio,
    Modal,
} from 'antd';
import dayjs from 'dayjs'

const FromAddAndUpdate = (props) => {
    const [form] = Form.useForm();
    const { openModal, handleModalClose, handleAddTableRow, dataRow, dataTitle } = props;

    const [confirmLoading, setConfirmLoading] = useState(false);

    const handleCancel = () => {
        handleModalClose()
        form.resetFields();
    }

    useEffect(() => {
        console.log('dataRow子模块,useEffect()方法：', dataRow)
        if (Object.keys(dataRow).length !== 0) {
            //把普通日期转换成moment
            dataRow.date = dayjs(dataRow.date, 'YYYY-MM-DD')
            // 数据回显到from表单里
            form.setFieldsValue(dataRow)
        }
    }, [dataRow, dataRow.uuid, form]);

    const handleOk = () => {
        form.validateFields().then(value => {
            setConfirmLoading(true);
            console.log("handleOk -> fieldsValue :", value)
            //把moment转换成普通日期格式
            let newDateDP = value['date'].format('YYYY-MM-DD')
            const rangeValue = value['range-picker'];
            let newDateRP = [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
            console.log('moment -> dateDP:', newDateDP, 'moment -> dateRP:', newDateRP)

            //确定按钮加载效果
            setTimeout(() => {
                //取消按钮上的加载效果
                setConfirmLoading(false);
                //关闭Model窗体
                handleModalClose()
                //给table添加一行数据
                // value.key = new Date().getTime()
                value.date = newDateDP
                handleAddTableRow(value)

                //重置form表单
                form.resetFields();
            }, 3000);
        }).catch((errorInfo) => {

        })
    }


    //日期范围
    const { RangePicker } = DatePicker;
    const { Option } = Select;

    const config = {
        rules: [
            {
                required: true
            }
        ]
    }

    return (
        <>
            <Modal title={dataTitle}
                open={openModal}
                onOk={handleOk}
                onCancel={handleCancel}
                confirmLoading={confirmLoading}
                // 在v5.0.7~5.1.5中不设置true会有闪现的问题
                destroyOnClose={true}
            >
                <Form form={form} name="userForm" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>

                    <Form.Item name="key" label="key" hidden={true} >
                        <Input />
                    </Form.Item>

                    <Form.Item name="date" label="日期" {...config} >
                        <DatePicker />
                    </Form.Item>

                    <Form.Item name="range-picker" label="日期范围"  {...config} >
                        <RangePicker />
                    </Form.Item>

                    <Form.Item name="week" label="当前星期"  {...config} >
                        <Select placeholder="请选择" allowClear  >
                            <Option value="星期一">星期一</Option>
                            <Option value="星期二">星期二</Option>
                            <Option value="星期三">星期三</Option>
                            <Option value="星期四">星期四</Option>
                            <Option value="星期五">星期五</Option>
                            <Option value="星期六">星期六</Option>
                            <Option value="星期日">星期日</Option>
                        </Select>
                    </Form.Item>

                    <Form.Item name="win" label="风向">
                        <Checkbox.Group>
                            <Row>
                                <Checkbox value="东风" style={{ lineHeight: '32px' }} > 东风 </Checkbox>
                                <Checkbox value="南风" style={{ lineHeight: '32px' }} > 南风 </Checkbox>
                                <Checkbox value="西风" style={{ lineHeight: '32px' }} > 西风 </Checkbox>
                                <Checkbox value="北风" style={{ lineHeight: '32px' }} > 北风 </Checkbox>

                                <Checkbox value="东南风" style={{ lineHeight: '32px' }} > 东南风 </Checkbox>
                                <Checkbox value="西南风" style={{ lineHeight: '32px' }} > 西南风 </Checkbox>
                                <Checkbox value="西北风" style={{ lineHeight: '32px' }} > 西北风 </Checkbox>
                                <Checkbox value="东北风" style={{ lineHeight: '32px' }} > 东北风 </Checkbox>
                            </Row>
                        </Checkbox.Group>
                    </Form.Item>

                    <Form.Item name="air_level" label="空气质量">
                        <Radio.Group>
                            <Radio value="优">优</Radio>
                            <Radio value="良">良</Radio>
                            <Radio value="轻度污染">轻度污染</Radio>
                            <Radio value="中度污染">中度污染</Radio>
                            <Radio value="重度污染">重度污染</Radio>
                            <Radio value="严重污染">严重污染</Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item name="tem1" label="最高温度"  {...config} >
                        <InputNumber />
                    </Form.Item>
                    <Form.Item name="tem2" label="最低温度"  {...config} >
                        <InputNumber />
                    </Form.Item>

                    <Form.Item name="wea_img" label="图标"  >
                        <Image />
                    </Form.Item>

                </Form>
            </Modal>
        </>
    );
};

export default FromAddAndUpdate;